<script setup lang="ts">
import { useHome } from '../../../composables/use-home';

const { sceneList, changeScene } = useHome();

function onSceneClick(id: string) {
  changeScene(id);
}
</script>

<template>
  <div class="w-full h-full overflow-auto">
    <div
      class="flex-none py-2 text-lg font-bold text-center border-0 border-b border-solid border-border"
    >
      洞府
    </div>
    <div class="flex-1 overflow-auto p-2">
      <div class="grid grid-cols-2 gap-2">
        <div v-for="scene in sceneList" :key="scene.id" class="w-full">
          <a-button size="large" :block="true" @click="onSceneClick(scene.id)">
            {{ scene.name }}
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>
